<!doctype html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>快速上手 layer，新人必看</title>
  <link rel="stylesheet" href="/layui/dist/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/css/global.css" media="all">
  <link rel="stylesheet" href="/static/css/independents.css" media="all">
  <script src="/jquery/1.12.3/jquery.min.js"></script>
  <script src="/layui/release/layer/dist/layer.js"></script>
 </head>
 <body>
  <div class="header">
   <div class="layui-main"> <a class="logo" href="/index.html"> <img src="/static/images/layui/logo.png" alt="layui"> </a>
    <ul class="layui-nav">
     <li class="layui-nav-item"> <a href="/index.html" target="_blank">layui</a> </li>
     <li class="layui-nav-item layui-this"> <a href="/">layer</a> </li>
    </ul>
   </div>
  </div>
  <div class="alone-banner layui-bg-black">
   <div class="layui-main">
    <h1 style="padding-top: 40px;">layer 快速上手</h1>
    <p>如果，你初识 layer，你对它不知所措，你甚至不知如何绑定事件… 那或许你应该用秒做单位，快速认识它</p>
    <p><button class="layui-btn layui-btn-normal" onclick="$('html,body').animate({scrollTop: 250}, 500);">开始了解</button></p>
   </div>
  </div>
  <div class="layui-main alone-nav">
   <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
     <li> <a href="/layer/index.html">layer首页</a> </li>
     <li class="layui-this"> 快速上手 </li>
    </ul>
   </div>
   <p style="margin: 20px 0; text-align: center;"> <!-- layer-728*90 --> <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="4800491433"></ins> </p>
   <blockquote class="layui-elem-quote layui-quote-nm layui-text">
     获得 layer 文件包后，解压并将 <em>layer 整个文件夹</em>（不要拆分结构） 存放到你项目的任意目录，使用时，<em>只需引入 layer.js 即可。</em> 下面是一个入门示例：
   </blockquote>
   <pre class="layui-code">
<code>&lt;</code>!DOCTYPE html&gt;
<code>&lt;</code>html&gt;
<code>&lt;</code>head&gt;
  &lt;meta charset="utf-8"&gt;
  <code>&lt;</code>title&gt;开始使用layer<code>&lt;</code>/title&gt;
<code>&lt;</code>/head&gt;
<code>&lt;</code>body&gt;



  <code>&lt;</code>script src="jQuery的路径"&gt;<code>&lt;</code>/script&gt; &lt;!-- 你必须先引入jQuery1.8或以上版本 --&gt;
  <code>&lt;</code>script src="layer.js的路径"&gt;<code>&lt;</code>/script&gt;

  <code>&lt;</code>script&gt;
  <span id="hello1">
  //弹出一个提示层
  $('#test1').on('click', function(){
    layer.msg('hello');
  });
  </span><button id="test1" class="layui-btn">运行上述例子</button>
  <span id="hello2">
  //弹出一个页面层
  $('#test2').on('click', function(){
    layer.open({
      type: 1,
      area: ['600px', '360px'],
      shadeClose: true, //点击遮罩关闭
      content: '\&lt;\div style="padding:20px;"&gt;自定义内容\&lt;\/div&gt;'
    });
  });
  </span><button id="test2" class="layui-btn">运行上述例子</button>
  <span id="hello3">
  //弹出一个iframe层
  $('#parentIframe').on('click', function(){
    layer.open({
      type: 2,
      title: 'iframe父子操作',
      maxmin: true,
      shadeClose: true, //点击遮罩关闭层
      area : ['800px' , '520px'],
      content: 'test/iframe.html'
    });
  });
  </span><button id="parentIframe" class="layui-btn">运行上述例子</button>
  <span id="hello4">
  //弹出一个loading层
  $('#test4').on('click', function(){
    var ii = layer.load();
    //此处用setTimeout演示ajax的回调
    setTimeout(function(){
      layer.close(ii);
    }, 1000);
  });
  </span><button id="test4" class="layui-btn">运行上述例子</button>
  <span id="hello5">
  //弹出一个tips层
  $('#test5').on('click', function(){
    layer.tips('Hello tips!', '#test5');
  });
  </span><button id="test5" class="layui-btn">运行上述例子</button>
  <code>&lt;</code>/script&gt;

  当你对此建立了一定的初始，你应该去详看API手册了。

<code>&lt;</code>/body&gt;
<code>&lt;</code>/html&gt;
  </pre>
  </div>
  <div class="layui-footer footer footer-index">
   <div class="layui-main">
    <p>© 2017 <a href="/index.html">layui.itmtr.cn</a> MIT license</p>
   </div>
  </div>
  <script>
!function(){

for(var i = 1; i <= 5; i++){
	new Function($('#hello'+ i).text())();
}
}();
</script>
 </body>
<script src="/common/common.js"></script>
</html>
